<script setup lang="ts">
import {onBeforeMount, onMounted, reactive, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import FlyWeather from "../components/fly-weather.vue";
interface Weather {
  day_weather: string,
  day_weather_short: string,
  day_wind_direction: string,
  day_wind_power: string,
  max_degree: string,
  min_degree: string,
  night_weather: string,
  night_weather_short: string,
  night_wind_direction: string,
  night_wind_power: string,
  aqi: {
    aqi: number,
    aqi_level: number,
    aqi_name: string,
    co: string,
    no2: string,
    o3: string,
    pm10: string,
    pm25: string,
    so2: string,
    update_time: string
  },
  Province: string,
  City: string
}
const current = ref(1)
const size = ref(5)

const data = reactive([]);
const currentIndex = ref(0);
const currentDesc = ref()
const currentTCM = ref()
const weather = ref<Weather>({} as Weather);

const getTCM = (current: number, size: number) => {
  myAxios.post('/medicine/info', {
    current: current,
    size: size
  }).then(res => {
    res.data.records.forEach(item => {
      data.push(item)
    })
    currentDesc.value = getCurrentDesc(data[currentIndex.value])
  })
}

const toNext = (next: number) => {
  if (currentIndex.value % 5 === 3) {
    current.value += 1;
    size.value += 5;
    getTCM(current.value, size.value)
  }
  if (next === -1) {
    currentDesc.value = getCurrentDesc(data[--currentIndex.value])
  } else if (next === 1) {
    currentDesc.value = getCurrentDesc(data[++currentIndex.value])
  }
}
const getCurrentDesc = (TCMInfo) => {
  currentTCM.value = {
    name: TCMInfo.name,
    spell: TCMInfo.spell,
    url: "src/assets/images/image/" + TCMInfo.imageAddress.split("\\")[1]
  }
  return [
    // {
    //   label: "学名",
    //   value: TCMInfo.name,
    //   span: 6
    // },
    {
      label: "英文名",
      value: TCMInfo.englishName,
      span: 1
    },
    // {
    //   label: "拼音",
    //   value: TCMInfo.spell,
    // },
    {
      label: "拉丁名",
      value: TCMInfo.latinName,
    },
    {
      label: "类别",
      value: TCMInfo.classify,
    },
    {
      label: "产地分布",
      value: TCMInfo.placeOfOrigin,
    }, {
      label: "药材性状",
      value: TCMInfo.medicineCharacter,
      span: 4
    }, {
      label: "品质",
      value: TCMInfo.quality,
    }, {
      label: "药材性味",
      value: TCMInfo.propertyAndFlavor
    }, {
      label: "功效",
      value: TCMInfo.effect
    }, {
      label: "来源",
      value: TCMInfo.source
    }
  ]
}
const getWeather = () => {
  myAxios.get('https://api.oioweb.cn/api/weather/GetWeather',{
    withCredentials: false
  }).then(res => {
    weather.value = res.result.condition
    weather.value.Province = res.result.city.Province
    weather.value.City = res.result.city.City
  })
}
onBeforeMount(() => {
  getWeather()
})
onMounted(() => {
  getTCM(current.value, size.value)
})
</script>

<template>
  <div id="homeView" v-if="currentTCM">
    <div class="herbal_name">
      <a-tooltip content="学名" background-color="#165DFF">
        <div class="zh_name">
          {{ currentTCM.name }}
        </div>
      </a-tooltip>
      <a-tooltip content="拼音" background-color="#165DFF">
        <div class="en_name">
          {{ currentTCM.spell }}
        </div>
      </a-tooltip>
    </div>
    <div class="herbal_image">
      <a-image
          width="400"
          :src="currentTCM.url"
      />
    </div>
    <div class="description">
      <a-space direction="vertical" size="large" fill>
        <a-descriptions :data="currentDesc" title="信息" layout="vertical" :column="{xs:1, md:3, lg:4}" bordered>
        </a-descriptions>
      </a-space>
    </div>
    <div class="pre" @click="toNext(-1)" v-if="currentIndex !== 0">
      <icon-left style="font-size: 60; stroke-linejoin: miter-clip; stroke-width: 5;"/>
    </div>
    <div class="next" @click="toNext(1)">
      <icon-right style="font-size: 60; stroke-linejoin: miter-clip; stroke-width: 5;"/>
    </div>
  </div>
  <div class="no-data" v-else>
    <div class="herbal_name">
      <a-skeleton animation>
        <a-space direction="vertical" :style="{width:'100%'}" size="large">
          <a-skeleton-line :rows="3" />
          <a-skeleton-shape />
        </a-space>
      </a-skeleton>
    </div>
  </div>

  <div class="recommend puff-in-center">
    <fly-weather :weather="weather"/>
  </div>
</template>

<style scoped>
#homeView {
  width: 100%;
  height: 100%;
}
.no-data {
  width: 100vw;
  height: 100vh;
}

.no-data .herbal_name {
  margin: 0 auto;
  padding-top: 20vh;
}

.herbal_name {
  width: 50vw;
  height: 40vh;
  text-align: center;
  letter-spacing: 1rem;
}

.zh_name {
  position: relative;
  top: 7rem;
  left: 4rem;
  font-size: 3rem;
  cursor: pointer;
}

.en_name {
  position: relative;
  top: 10rem;
  left: 4rem;
  font-size: 1.5vw;
  cursor: pointer;
}

.herbal_image {
  position: absolute;
  top: 10%;
  right: 15%;
}

.description {
  width: 90vw;
  margin: 0 4rem;
  height: 50vh;
  padding-bottom: 4rem;
  overflow: scroll;
}

.description > ul {
  list-style: none;
  color: white;
  display: flex;
  justify-content: space-evenly;
  cursor: pointer;
}

.description > ul > li:hover {
  font-size: 1vw;
  text-decoration: underline;
}

.description > ul > li.active {
  color: #535bf2;
}

.pre {
  position: absolute;
  top: 50vh;
  color: black;
  user-select: none;
}

.pre:hover {
  scale: 1.5;
  cursor: pointer;
}

.next {
  position: absolute;
  top: 50vh;
  right: 0;
  color: black;
  user-select: none;
}

.next:hover {
  scale: 1.5;
  cursor: pointer;
}
.recommend {
  position: absolute;
  top: 10%;
  left: 38%;
}
.puff-in-center {
  -webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
  animation: puff-in-center 5s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}
@-webkit-keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    opacity: 0;
  }
  30% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
